import TinyReact from "./TinyReact"

const root = document.getElementById("root")

const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="13" />
  </div>
)

const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test123">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h6>(观察: 这个将会被改变)</h6>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容2</span>
    <button onClick={() => alert("你好!!!!!")}>点击我</button>
    <input type="text" value="13" />
  </div>
)

// TinyReact.render(virtualDOM, root)

// setTimeout(() => {
//   console.log('======================')
//   TinyReact.render(modifyDOM, root)
// }, 3000)

// TinyReact.render(virtualDOM, root)

// console.log(virtualDOM)

function Heart (props) {
    return (<div>
    &hearts;
    {props.title}
    </div>)
}

function Demo() {
    return <Heart title="hello"  />
}

// TinyReact.render(<Demo />, root)
class Alert extends TinyReact.Component {
  constructor (props) {
    super(props)
    this.state = {
      title: "default title",
      persons: [{
        id: 1,
        name: '1'
      },{
        id: 2,
        name: '2'
      },{
        id: 3,
        name: '3'
      },{
        id: 4,
        name: '4'
      },{
        id: 5,
        name: '5'
      }]
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    const newState = JSON.parse(JSON.stringify(this.state))
    // newState.persons.push(newState.persons.shift())
    newState.persons.pop()
    this.setState(newState)
  }
  render () {
    return (
      <div>
        <ul>
          {
            this.state.persons.map(person => (
              <li key={person.id}>{person.name}</li>
            ))
          }
        </ul>
        <input type="text" ref={input => (this.input = input)} />
        <button onClick={this.handleClick}>改变</button>
        <Heart title="hello" ref={alert => (this.alert = alert)}  />
      </div>
    )
  }
}
TinyReact.render(<Alert name="zxd" />, root)

// setTimeout(() => {
//   TinyReact.render(<Alert name="123" />, root)
// }, 3000);